<template>
  <div class="playedu-main-body">
    <!-- 搜索栏 -->
    <div class="float-left j-b-flex mb-24">
      <div class="d-flex"></div>
      <div class="d-flex">
        <div class="d-flex mr-24">
          <a-typography-text>管理员名称：</a-typography-text>
          <a-input
            v-model:value="adminName"
            allow-clear
            style="width: 160px"
            placeholder="请输入管理员名称"
          />
        </div>

        <div class="d-flex mr-24">
          <a-typography-text>操作：</a-typography-text>
          <a-input
            v-model:value="title"
            allow-clear
            style="width: 160px"
            placeholder="请输入操作"
          />
        </div>

        <div class="d-flex mr-24">
          <a-typography-text>时间：</a-typography-text>
          <a-range-picker
            :disabled-date="disabledDate"
            format="YYYY-MM-DD"
            v-model:value="createdAts"
            style="margin-left: 10px"
            :placeholder="['时间-开始', '时间-结束']"
            @change="onDateChange"
          />
        </div>

        <div class="d-flex">
          <a-button class="mr-16" @click="resetData">重 置</a-button>
          <a-button type="primary" @click="searchData">查 询</a-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="float-left">
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="list"
        rowKey="id"
        :pagination="paginationProps"
      />
    </div>

    <!-- 详情弹窗 -->
    <AdminLogDetailDialog
      :id="admId"
      :open="visiable"
      :onCancel="() => (visiable = false)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from "vue";
import { Button } from "ant-design-vue";
import { adminLog } from "@/api";
import moment from "moment";
import type { Moment } from "moment";
import { dateWholeFormat, transUtcTime } from "@/utils";
import AdminLogDetailDialog from "./detail-dialog.vue";

interface DataType {
  id: number;
  admin_id: number;
  admin_name: string;
  created_at: string;
  error_msg?: string;
  ip: string;
  ip_area: string;
  method: string;
  module: string;
  opt: number;
  param: string;
  request_method: string;
  result: string;
  title: string;
  url: string;
}

const loading = ref(true);
const page = ref(1);
const size = ref(10);
const list = ref<DataType[]>([]);
const total = ref(0);

const title = ref("");
const adminId = ref("");
const adminName = ref("");
const created_at = ref<string[]>([]);
const createdAts = ref<Moment[]>([]);
const visiable = ref(false);
const admId = ref(0);

// 获取数据
const getData = () => {
  loading.value = true;
  adminLog
    .adminLogList(
      page.value,
      size.value,
      adminName.value,
      title.value,
      "",
      created_at.value[0],
      created_at.value[1]
    )
    .then((res: any) => {
      list.value = res.data.data;
      total.value = res.data.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

// 重置
const resetData = () => {
  title.value = "";
  adminId.value = "";
  adminName.value = "";
  page.value = 1;
  size.value = 10;
  list.value = [];
  createdAts.value = [];
  created_at.value = [];
  getData();
};

// 查询
const searchData = () => {
  page.value = 1;
  getData();
};

// 分页配置
const paginationProps = reactive({
  current: page,
  pageSize: size,
  total: total,
  showSizeChanger: true,
  onChange: (p: number, pageSize: number) => {
    page.value = p;
    size.value = pageSize;
    getData();
  },
});

// 时间选择
const disabledDate = (current: Moment) => {
  return current && current >= moment().add(0, "days");
};

const onDateChange = (_: any, dateString: string[]) => {
  if (dateString[0] && dateString[1]) {
    let date1 = dateString[0] + " 00:00:00";
    let date2 = dateString[1] + " 23:59:59";
    dateString[0] = transUtcTime(date1);
    dateString[1] = transUtcTime(date2);
    created_at.value = dateString;
  } else {
    created_at.value = [];
  }
};

const columns = [
  {
    title: "管理员名称",
    dataIndex: "admin_name",
    width: 150,
  },
  {
    title: "操作",
    dataIndex: "title",
  },
  {
    title: "IP",
    dataIndex: "ip",
    width: 250,
  },
  {
    title: "时间",
    dataIndex: "created_at",
    width: 200,
    customRender: ({ text }: any) => dateWholeFormat(text),
  },
  {
    title: "操作",
    key: "action",
    fixed: "right",
    width: 160,
    customRender: ({ record }: any) => {
      return h(
        Button,
        {
          type: "link",
          class: "b-link c-red",
          onClick: () => {
            admId.value = record.id
            visiable.value = true
          },
        },
        { default: () => "详情" }
      )
    },
  },
]

onMounted(() => {
  getData();
});
</script>
